<template>
  <div  class="app-container">
    <div v-show="isIframeLoaded" class="video-container">
      <iframe
        ref="myIframe"
        src="/cn/demo.html"
        width="100%"
        height="820px"
        @load="onIframeLoad"
        ></iframe>
    </div>
    <!-- 加载中的提示 -->
    <div v-show="!isIframeLoaded" class="video-container">
      {{ loadingMessage }}
    </div>
  </div>
</template>

<script>

import {EventBus} from '@/layout/components/event-bus';

import Cookies from 'js-cookie';


export default {
  name: "mv",
  components: {},
  data() {
    return {
      isIframeLoaded: false, // 控制 iframe 是否加载完成
      loadingMessage: "加载中，请稍候...",
    };
  },
  mounted() {
    EventBus.$on('custom-event', this.handleEvent);
  },
  created() {

  },
  methods: {
    handleEvent(data) {
      // 调用方法或执行操作
      const iframe = this.$refs.myIframe;
      if (iframe.contentWindow) {
        const doc = iframe.contentWindow.document;
        const styleSheet = doc.getElementById('divPlugin');
        if (styleSheet) {
          if (data == 0) {
            styleSheet.style.marginLeft = '80px'; // 修改样式表内容
            styleSheet.style.width = '1785px'; // 修改样式表内容
          } else if (data == 1) {
            styleSheet.style.marginLeft = '225px'; // 修改样式表内容
            styleSheet.style.width = '1650px';
          }
        }
      }
    },

    onIframeLoad() {
      const value = Cookies.get('sidebarStatus');
      const iframe1 = this.$refs.myIframe;
      // 获取 iframe 的内部文档和窗口对象
      const iframeWindow = iframe1.contentWindow;
      const iframeDocument = iframe1.contentDocument;
      // 检查 iframe 内容是否可访问
      if (!iframeWindow || !iframeDocument) {
        console.error('无法访问 iframe 内容');
        return;
      }
      // 延迟调用，确保页面完全加载
      setTimeout(() => {
        this.callhidPluginButtonMethod(iframeWindow, iframeDocument);
      }, 100);
      if (iframe1.contentWindow) {
        const doc1 = iframe1.contentWindow.document;
        const styleSheet1 = doc1.getElementById('divPlugin');
        if (value == 0) {
          styleSheet1.style.marginLeft = '80px'; // 修改样式表内容
          styleSheet1.style.width = '1785px'; // 修改样式表内容
        } else if (value == 1) {
          styleSheet1.style.marginLeft = '225px'; // 修改样式表内容
          styleSheet1.style.width = '1650px';
        }
      }

      // 延迟调用，确保页面完全加载
      setTimeout(() => {
        this.callLoginMethod(iframeWindow, iframeDocument);
      }, 1000); // 根据需要调整延迟时间
      // 调用登录方法
      this.callLoginMethod(iframeWindow, iframeDocument);
      // 延迟调用，确保页面完全加载
      setTimeout(() => {
        this.callLogoutMethod(iframeWindow, iframeDocument);
      }, 3000); // 根据需要调整延迟时间
      setTimeout(() => {
        this.isIframeLoadedMeothod(iframeWindow, iframeDocument);
      }, 4000);
    },

    callLoginMethod(iframeWindow, iframeDocument) {
      const loginButton = iframeDocument.querySelector('#login-button'); // 替换为实际的登录按钮选择器
      if (loginButton) {
        loginButton.click(); // 触发点击事件
        console.log('登录按钮已点击');
      } else {
        console.error('未找到登录按钮');
      }
    },

    callLogoutMethod(iframeWindow, iframeDocument) {
      // 查找登录按钮并触发点击事件
      const realPlayButton = iframeDocument.querySelector('#realPlay-button'); // 替换为实际的登录按钮选择器
      if (realPlayButton) {
        realPlayButton.click(); // 触发点击事件
        console.log('预览按钮已点击');
      } else {
        console.error('未找到预览按钮');
      }

    },
    isIframeLoadedMeothod(iframeWindow, iframeDocument){
      this.isIframeLoaded = true; // 更新状态，显示外层 div
      const iframe = this.$refs.myIframe;
      if (iframe.contentWindow) {
        const doc = iframe.contentWindow.document;
        const styleSheet = doc.getElementById('divPlugin');
        if (styleSheet) {
          styleSheet.style.visibility = 'visible'; // 修改样式表内容
        }
      }
      this.callshowPluginButtonMethod(iframeWindow, iframeDocument);
    },

    callhidPluginButtonMethod(iframeWindow, iframeDocument) {
      // 查找登录按钮并触发点击事件
      const realPlayButton = iframeDocument.querySelector('#hidPluginButton'); // 替换为实际的登录按钮选择器
      if (realPlayButton) {
        realPlayButton.click(); // 触发点击事件
        console.log('插件已隐藏');
      } else {
        console.error('未找到插件隐藏按钮');
      }

    },

    callshowPluginButtonMethod(iframeWindow, iframeDocument) {
      // 查找登录按钮并触发点击事件
      const realPlayButton = iframeDocument.querySelector('#showPluginButton'); // 替换为实际的登录按钮选择器
      if (realPlayButton) {
        realPlayButton.click(); // 触发点击事件
        console.log('插件已展示');
      } else {
        console.error('未找到插件展示按钮');
      }

    },

  },

};
</script>
<style scoped>
.video-container{
  position: relative; /* 确保iframe是相对于这个div定位的 */
  overflow: hidden; /* 隐藏父容器的滚动条 */
}
</style>
